<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
    <a-drawer
            title="详情"
            :visible="visible"
            @close="cancel"
            :body-style="{ paddingBottom: '80px' }"
            :width="750"

    >


      <a-comment style="margin-bottom: -20px" v-loading="loading">
        <template slot="actions">
      <span key="comment-basic-like">
        <a-tooltip title="Like">
          <a-icon type="eye"  />
        </a-tooltip>
        <span style="padding-left: 8px;cursor: auto">
          {{ info.data.visit }}
        </span>
      </span>

          <span key="comment-basic-like">
        <a-tooltip title="Like">
          <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like" />
        </a-tooltip>
        <span style="padding-left: 8px;cursor: auto">
          {{ info.data.dz }}
        </span>
      </span>

        </template>
        <a slot="author">{{info.data.userniname}}
          <a-icon v-if="info.data.gender==1" type="man" style="color: blue"/>
          <a-icon v-if="info.data.gender==2" type="woman" style="color: deeppink"/>
        </a>
        <a-avatar slot="avatar" :src="info.data.userimg" />
        <p slot="content">{{info.data.content}}</p>
        <p slot="content" v-if="info.data.pictureaddr">
          <el-image  fit="scaleDown" v-for="item in info.data.pictureaddr.split(',')"
                     :src="item" :preview-src-list="[item]" style="width:200px">
          </el-image>
        </p>
        <a-tooltip slot="datetime" :title="info.data.creationtime">
          <span>{{info.data.creationtime}}</span>
        </a-tooltip>

        <el-divider ></el-divider>

        <a-comment style="margin-top: -25px; margin-bottom: -25px; " v-for="item in info.datalist">
          <a slot="author">{{item.followUpUserName}}
            <a-icon v-if="item.gender==1" type="man" style="color: blue"/>
            <a-icon v-if="item.gender==2" type="woman" style="color: deeppink"/>
          </a>
          <a-avatar slot="avatar" :src="item.followUpUserImg"/>
          <a-tooltip slot="datetime"><span>{{item.createTime}} <el-tag type="danger" @click="deleteHandle(item.id)">删除</el-tag> <el-tag @click="replyUser(item)">回复</el-tag></span></a-tooltip>
          <p slot="content" >{{item.content}}</p>

          <a-comment v-for="child in item.datalist" style="margin-top: -38px;" >
            <a slot="author">{{child.followUpUserName}}
              <a-icon v-if="child.gender==1" type="man" style="color: blue"/>
              <a-icon v-if="child.gender==2" type="woman" style="color: deeppink"/>
            </a>
            <a-avatar slot="avatar" :src="child.followUpUserImg"/>
            <p slot="content">
              <a-tag>@{{child.pUserName}}</a-tag>{{child.content}}
            </p>
            <a-tooltip slot="datetime" >
              <span>{{child.createTime}} <el-tag type="danger" @click="deleteHandle(child.id)">删除</el-tag> <el-tag @click="replyUser(child)">回复</el-tag> </span>
            </a-tooltip>
          </a-comment>
        </a-comment>
      </a-comment>

      <a-comment>
<!--        <a-avatar-->
<!--          slot="avatar"-->
<!--          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"-->
<!--        >-->
<!--          <a-icon class="" type="man" style="color: blue"/>-->
<!--        </a-avatar>-->

        <div slot="content">

          <el-select v-model="reply.followupuserid" placeholder="请选择运营" style="width: 320px" filterable clearable>
            <el-option
              v-for="item in userDataList"
              :label="item.userniname+'-'+(item.gender==1?'男':'女')"
              :key="item.userid"
              :value="item.userid">
            </el-option>
          </el-select>

<!--          <el-date-picker-->
<!--            v-model="reply.createtime"-->
<!--            type="date"-->
<!--            format="yyyy-MM-dd HH:mm:ss"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            placeholder="选择日期" style="width: 320px;margin-left: 10px">-->
<!--          </el-date-picker>-->

          <el-date-picker
            v-model="reply.createtime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期" style="width: 320px;margin-left: 10px">
          >
          </el-date-picker>


          <a-form-item>
            <a-textarea :rows="4" v-model="reply.content" :placeholder="placeholderMsg"/>
          </a-form-item>
          <a-form-item>
            <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
              回复
            </a-button>
          </a-form-item>
        </div>
      </a-comment>


  </a-drawer>
</template>

<script>
    import api from '@/api/api'
    export default {
    components: {
    },
    data () {
      return {
        submitting:false,
        likes: 0,
        dislikes: 0,
        action: null,
        userDataList:[],
        visible: false,
        loading:false,
        info:{
          data:{},
          datalist:[]
        },
        placeholderMsg:'请输入回复内容',
        reply:{
          fid:'',
          followupuserid:'',
          content:'',
          createtime:this.$moment().format('YYYY-MM-DD HH:mm:ss')
        },
        dataForm: {
          cid: 0,
          adminid:'',
          cuuid: '' ,
          content: ''
        },
        dataRule: {
          cuuid: [
            { required: true, message: '生成的随机id  为必填项', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '内容  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {

      like() {
        this.likes = 1;
        let postData=Object.assign({},{})
        postData.fid=this.dataForm.cid
        api.post('rest/vabc/friendsCircleReply/like',postData).then(res => {
          //this.info = res;
          this.info.data.dz=res.dz
          this.info.data.visit=res.visit
        }).finally(() => {
        });
      },
      dislike() {
        this.likes = 0;
        this.dislikes = 1;
        this.action = 'disliked';
      },

      init (id,adminid) { // 初始化表单验证规则
       // console.error(id)
        this.reply.fid = id

        this.dataForm.cid = id
        this.dataForm.adminid = adminid
        this.visible = true
        this.$nextTick(() => {
         // this.$refs['dataForm'].resetFields()
          if (this.dataForm.cid){
              this.loading = true
            let postData=Object.assign({},{})
            postData.cid=this.dataForm.cid
            postData.fid=this.dataForm.cid
            postData.pageSize=100
            api.post('rest/vabc/friendsCircle/getFriendsCircleReplyListByFid',postData).then(res => {
              console.log(res)
              this.info = res;
            }).finally(() => {
                this.loading = false
            });
          }
        })
        this.getUserDataList()
      },
      handleChange(){},
      // 表单数据提交
      submit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if (!this.dataForm.cid){
                postData.cid==undefined
                api.post('rest/vabc/friendsCircle/save',postData).then(res =>{
                    this.$message.success("创建成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }else{
                api.post('rest/vabc/friendsCircle/update',postData).then(res =>{
                    this.$message.success("保存成功")
                    this.reset()
                    this.visible = false
                    this.$parent.getDataList()
                }).finally(() => {
                    this.loading = false
                });
            }
          }
        })
      },
     cancel(){
        this.visible = false
        this.reset()
    },
    reset(){
        // this.$refs.info.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        this.info={
        data:{},
        datalist:[]
      };
        //图片回写
        //this.$refs["childData"].fileList=[]
    },


      getUserDataList () {
        this.dataListLoading = true
        this.dataListLoading = true
        let postData={
          'order':'desc',
          'column':'createtime',
          'userexist':1,
          'pageSize':1000
        }
        Object.assign(postData)
        api.post('rest/vabc/userEntity/list',postData).then(res => {
          this.userDataList=res.datalist
        }).finally(() => {
          this.dataListLoading = false
        });
      },
      replyUser(item){
        this.reply.pid=item.id
        this.placeholderMsg='请输入想回复 '+item.followUpUserName+" 的内容";
      },
      reload(){
        this.loading = true
        let postData2=Object.assign({},{})
        postData2.cid=this.dataForm.cid
        postData2.fid=this.dataForm.cid
        postData2.pageSize=100
        api.post('rest/vabc/friendsCircle/getFriendsCircleReplyListByFid',postData2).then(res => {
          this.info = res;
        }).finally(() => {
          this.loading = false
        });
      },
      handleSubmit () {
        this.submitting = true
        console.log(this.reply)
        let postData={}
        Object.assign(postData,this.reply, this.tableForm)
        api.post('rest/vabc/friendsCircleReply/save',postData).then(res => {
          this.reply.content=''
          //this.reply.createtime=
          this.reply.followupuserid=''
          this.reply.pid=''
          this.placeholderMsg='请输入想回复的内容';
          this.reload();
        }).finally(() => {
          this.submitting = false
        });
      },
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.cid
        })
        this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData={ids:ids.join(',')};
          api.post('rest/vabc/friendsCircleReply/delete',postData).then(res => {
            this.$message.success("删除成功")
            this.reload();
          })
        })
      },
    }
  }
</script>
